<template>
  <div class="studyContainer">
    <div class="box1">
      <div class="title"> 成绩记录 </div>
      <div class="chengJJL-container">
        <div class="chengJJL-item">
          <div class="chengJJL-itembox-left">
            <div class="score">
              {{ rlt.stuRankInfo.sum_score }}
            </div>
            <img
                v-if="rlt.stuRankInfo.ranking && rlt.stuRankInfo.ranking <= 50"
                class="score-img"
                src="@/assets/images/profile/students/Good.png"
            />
            <p class="score-p">排名：{{ rlt.stuRankInfo.ranking }}/{{ rlt.stuRankInfo.total_num }}</p>
          </div>
          <div class="chengJJL-itembox-right">
            <div ref="lineChat" class="chart-container"></div>
          </div>
        </div>
        <div class="chengJJL-item">
          <div class="chengJJL-itembox">
            <div ref="lineAreaChat" class="chart-container"></div>
          </div>
          <div class="chengJJL-itembox">
            <div ref="barChartRight" class="chart-container"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="title" style="margin-top: 10px;" v-px-to-vm> 学科均衡度 </div>
      <div class="xuekjhd-container">
        <div class="xuekjhd-itembox-left">
          <div ref="radarChart" class="chart-container"></div>
        </div>
        <div class="xuekjhd-itembox-right">
          <div v-if="rlt.stuRankInfo.sum_score !== 0">
            <p class="studesc"><span class="stuname"> {{ stuInfo.xm }}</span> 同学在本学年 <span class="yxxk">{{ youXXK }}</span> 表现较好。
              <!-- 英语、地理、化学语文仍需继续加强练习。 -->
            </p>
            <div class="table-container">
              <!-- 第一行 -->
              <div class="table-row">
                <div class="table-cell col-30 flex" style="color: #00FF94;">
                  <img src="@/assets/images/profile/students/xiao.png" alt=""/> 优势学科
                </div>
                <div class="table-cell col-70">
                  {{youXXK}}
                </div>
              </div>

              <!-- 第二行
              <div class="table-row">
                  <div class="table-cell col-30 flex " style="color: #FFF383;">
                      <img src="@/assets/images/profile/students/ku.png" alt="" /> 劣势学科
                  </div>
                  <div class="table-cell col-70">
                      语文 英语 化学 地理
                  </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { ref, onMounted, watch, inject, reactive ,onUnmounted} from 'vue'
import * as echarts from 'echarts'
import { useParamsStore } from '@/stores/useParamsStore'
import * as stuApi from '@/api/student'

let paramsStore = useParamsStore()

// 学生学号
const glb_stuCode = ref('')

const isShow = ref(false)

// 学生平滑曲线图表（最高分，最低分，平均分）
const lineChat = ref(null)

// 学生图表 语文、数学、英语、物理、化学、生物 等成绩
const barChartRight = ref(null)

// 学生成绩-最近一次考试的每科成绩及排名数据
const lineAreaChat = ref(null)

const radarChart = ref(null)

const rlt = reactive({
  // 学生排名情况
  stuRankInfo: {
    ranking: 0,
    sum_score: 0,
    total_num: 0
  }
});

const stuInfo = ref({});

const getStudent = async () => {
  const response = await stuApi.getStudentBaseInfo(glb_stuCode.value)
  if (response.data && response.data.length > 0) {
    stuInfo.value = response.data[0]
  }
  return response
}

// 初始化页面数据
const initData = async () => {
  // 获取学生总分排名
  await getStudentTotalScoreRank();

  // 学生成绩-最高分和平均分数据
  await get_study_max_avg();

  // 学生成绩-最近5次考试总分
  await getStudy_last_exams_score();

  // 学科均衡度
  await subject_jhd();

  await getStudent();
}

// 获取学生总分排名
const getStudentTotalScoreRank = async () => {
  if(glb_stuCode.value)
  {
    return stuApi.getStudy_total_rank(glb_stuCode.value).then(res => {
      if (res.data.length > 0) {
        rlt.stuRankInfo = res.data[0];
        isShow.value = rlt.stuRankInfo.ranking < 50 ? true : false;
      }
      else {
        rlt.stuRankInfo = { ranking: 0, sum_score: 0, total_num: 0 };
      }
    });
  }

}

// 学生成绩-最高分和平均分数据
const get_study_max_avg = async () => {
  stuApi.getStudy_total_score(glb_stuCode.value).then(res => {
    if (res.data.length > 0) {
      study_max_avg_chart(res.data[0]);
    }
    else {
      study_max_avg_chart({});
    }
  });
}

// 图表 学生成绩-最高分和平均分数据
const study_max_avg_chart = async (resData) => {
  if (lineChat.value) {
    const existingChart = echarts.getInstanceByDom(lineChat.value);
    if (existingChart) existingChart.dispose();
  }
  const lineChart = echarts.init(lineChat.value)
  let data = [ { name: '', value:  0 } , { name: '你在这里', value: rlt.stuRankInfo.sum_score || 0 }, { name: '最高分', value: resData.max_score || 0 }];
  lineChart.setOption({
    grid: {
      top: 20,
      right: 20,
      bottom: 10,
      left: 0,
      containLabel: true
    },
    // tooltip: {
    //     trigger: 'axis',
    //     formatter: '{c}' // 简洁显示
    // },
    xAxis: {
      type: 'category',
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        data: data,
        type: 'line',
        smooth: true,
        symbolSize: 12,
        symbol: 'circle',
        itemStyle: {
          color: (params) => {
            if(params.name === '最高分') {
              return '#00FFF0'
            } else if(params.name === '最低分') {
              return  '#00FC43'
            } else if(params.name === '你在这里') {
              return '#FAFF00'
            }
          },
          shadowBlur: 0,
          shadowColor: 'rgba(0, 0, 0, 1)'
        },
        lineStyle: {
          color: '#00BFFF',
          width: 2
        },
        label: {
          show: true,
          position: 'top',
          textShadowColor: 'transparent',
          textShadowBlur: 0,
          color: 'inherit',
          formatter: function (params) {
            const showList = ['最高分', '最低分', '你在这里'];
            return showList.includes(params.name) ? `${params.name}：${params.value}分` : '';
          },
        },
        markLine: {
          symbol: ['none', 'none'],
          label: {
            show: true,
            position: 'end',
            offset: [-80, -20],
            formatter: '平均分: {c}分',
            color: '#FFFFFF'
          },
          data: [
            {
              // type: 'average',
              yAxis: resData.avg_score || 0,
              lineStyle: {
                color: '#61FF00',
                width: 1,
                type: 'dashed'
              },
            }
          ],
          silent: false
        }
      }
    ]
  })
}
const colorList = ["#00fff1", "#00ffb2", "#00c1ff"]
// 图表 学生成绩-最近一次考试每个学科的年级最高分数据
const study_grade_max_chart = async (resData) => {
  if (barChartRight.value) {
    const existingChart = echarts.getInstanceByDom(barChartRight.value);
    if (existingChart) existingChart.dispose();
  }

  var xdata = resData?.map(obj => obj.discipline) || []
  var seriesData = resData?.map(obj => Number(obj.score) || 0) || [];
  var option = {
    color: [],
    grid: {
      top: 20,
      right: 20,
      bottom: '3%',
      left: 0,
      containLabel: true
    },
    title: {
      text: ''
    },
    tooltip: {},
    xAxis: {
      data: xdata,
      axisLine: {
        lineStyle: {
          color: '#0094FF' // ✅ X轴线颜色
        }
      },
      axisTick: {
        lineStyle: {
          color: '#0094FF' // ✅ X轴刻度线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: '#0094FF' // ✅ X轴分割线颜色
        }
      },
      axisLabel: {
        color: '#FFFFFF' // X轴标签文字颜色为白色
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#0094FF' // ✅ Y轴线颜色
        }
      },
      axisLabel: {
        color: '#00D1FF', // Y轴标签文字颜色为白色
        fontSize: 10,
        fontWeight: 'bold'
      },
      splitLine: {
        lineStyle: {
          color: '#0094FF' // ✅ Y轴分割线颜色
        }
      }
    },
    series: [
      {
        type: 'bar',
        barWidth: 27,
        data: seriesData,
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          color: '#fff' // 黄色标签
        },
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex % colorList.length];
          },
        },
      }
    ]
  };
  const bar_right = echarts.init(barChartRight.value)
  bar_right.setOption(option)
}

// 学生成绩-最近5次考试总分
const getStudy_last_exams_score = async () => {
  stuApi.getStudy_last_exams_score(glb_stuCode.value).then(res => {
    if (res.data.length > 0) {
      study_last_score_chat(res.data);
    }
    else {
      study_last_score_chat(null);
    }
  });
}

// 图表 学生成绩-最近一次考试的每科成绩及排名数据
const study_last_score_chat = async (resData) => {
  if (lineAreaChat.value) {
    const existingChart = echarts.getInstanceByDom(lineAreaChat.value);
    if (existingChart) existingChart.dispose();
  }
  const areaStyleConfig = {
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(0, 255, 240, 1)' }, // 青色渐变
          { offset: 1, color: 'rgba(0, 255, 240, 0)' }    // 绿色渐变
        ]
      },
      shadowBlur: 10,
      shadowColor: 'rgba(0, 255, 255, 0.5)'
    },
    symbol: 'circle', // 设置拐点形状为圆形
    symbolSize: 8,    // 设置拐点大小
    itemStyle: { color: '#00FC43' }, // 黄色数据点
    lineStyle: { color: '#00FC43', width: 1 }, // 黄色线条
    label: {
      show: true,
      position: 'top',
      formatter: '{c}',
      color: '#fff' // 黄色标签
    }
  }
  var xdata = resData?.map(item => item.exam_session.replace(/.*年级(.*)/, '$1'));
  var seriesData = resData?.map(item => item.sum_score);

  var areaLineChatOption = {
    grid: {
      top: 25,
      right: 30,
      bottom: '3%',
      left: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis', // 按坐标轴触发
      backgroundColor: 'rgba(255,255,255,0.9)', // 背景色
      borderColor: '#666', // 边框颜色
      textStyle: {
        color: '#333' // 文字颜色
      },
      formatter: (params) => {
        return `${params[0].axisValue}：${params[0].value}`
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xdata,
      axisLine: {
        lineStyle: {
          color: '#0094FF' // ✅ X轴线颜色
        }
      },
      axisTick: {
        lineStyle: {
          color: '#0094FF' // ✅ X轴刻度线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: '#0094FF' // ✅ X轴分割线颜色
        }
      },
      axisLabel: {
        color: '#FFFFFF', // X轴标签文字颜色为白色
        // 添加旋转角度
        //rotate: -20,
        interval: 0, // 显示所有标签
        fontSize: 12,
        // 文字换行
        formatter: function(value) {
          // 如果文字太长，可以截断或换行
          if (value.length > 6) {
            return value.substring(0, 5) + '\n' + value.substring(5);
          }
          return value;
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#0094FF' // ✅ Y轴线颜色
        }
      },
      axisLabel: {
        // margin: 20, // 增加标签与轴线之间的距离
        color: '#00D1FF', // Y轴标签文字颜色为白色
        fontSize: 12,
        fontWeight: 'bold'
      },
      splitLine: {
        lineStyle: {
          color: '#0094FF' // ✅ Y轴分割线颜色
        }
      }
    },
    series: [
      {
        data: seriesData,
        type: 'line',
        ...areaStyleConfig
      }
    ]
  };
  const areaLineChat = echarts.init(lineAreaChat.value)
  areaLineChat.setOption(areaLineChatOption);

  areaLineChat.on('click', function (params) {
    // 确保点击的是数据点
    if (params.componentType === 'series' && resData && resData[params.dataIndex]) {
      const clickedExam = resData[params.dataIndex];
      const newOption = {
        series: [{
          data: areaLineChatOption.series[0].data.map((value, i) => {
            return {
              value: value,
              itemStyle: {
                color: i === params.dataIndex ? '#FFF500' : '#00FC43'
              },
              symbolSize: i === params.dataIndex ? 12 : 8,
            }
          })
        }]
      };
      areaLineChat.setOption(newOption);

      if (clickedExam.exam_date) {
        getStudy_subject_score(clickedExam.exam_date);
      }
    }
  });

  if (resData == null) {
    getStudy_subject_score(null)
  }
  else {
    getStudy_subject_score(resData[0].exam_date)
  }
}

// 学生成绩-最高分和平均分数据
const getStudy_subject_score = async (date) => {
  if(!date)
  {
    study_grade_max_chart(null);
    return;
  }
  stuApi.getStudy_subject_score(glb_stuCode.value,date).then(res => {
    if (res.data.length > 0) {
      study_grade_max_chart(res.data);
    }
    else {
      study_grade_max_chart(null);
    }
  });
}

const subject_jhd_chat = async (gradeMaxData,lastScoreData) => {
  if (radarChart.value) {
    const existingChart = echarts.getInstanceByDom(radarChart.value);
    if (existingChart) existingChart.dispose();
  }

  if (!gradeMaxData?.data && !lastScoreData?.data || gradeMaxData.data.length === 0 && lastScoreData.data.length === 0) {
    // 初始化空雷达图，所有值为0
    const emptyOption = {
      title: {
        text: '暂无数据',
        x: 'center',
        y: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 14
        }
      },
      radar: {
        indicator: ['']
      },
      series: [{
        type: 'radar',
        data: []
      }]
    };
    const dadar = echarts.init(radarChart.value);
    dadar.setOption(emptyOption);
    return;
  }


  // 确保两个数据集的学科顺序一致
  const disciplines = gradeMaxData.data.map(item => item.discipline);

  // 创建个人成绩映射表
  const personalScoreMap = {};
  lastScoreData.data.forEach(item => {
    personalScoreMap[item.discipline] = Number(item.score);
  });

  // 创建年级最高分映射表
  const gradeMaxScoreMap = {};
  gradeMaxData.data.forEach(item => {
    gradeMaxScoreMap[item.discipline] = Number(item.max_score);
  });

  // 构建统一的indicator
  // const indicator = disciplines.map(discipline => ({
  //     text: discipline,
  //     max: gradeMaxScoreMap[discipline] || 100 // 使用年级最高分为max值
  // }));

  const colorList = ['#00FF94', '#FFF383'];
  const indicator = [];
  gradeMaxData.data.forEach((item, index) => {
    var subText = item.discipline;
    var subMax = (subText == '语文' || subText == '数学' || subText == '英语') ? 150 :  100;
    indicator.push({
      text: subText,
      max: subMax,
      color: colorList[(index + 1) % colorList.length]

    });
  });

  // 构建个人成绩数据，确保顺序一致
  const personalValues = disciplines.map(discipline =>
      personalScoreMap[discipline] || 0
  );

  // 构建年级成绩数据，确保顺序一致
  const gradeValues = disciplines.map(discipline =>
      gradeMaxScoreMap[discipline] || 0
  );

  var dadarOption = {
    color: colorList,
    title: {
      text: ''
    },
    legend: {
      show: true,
      textStyle: {
        fontSize: 14,
        color: function(params) {
          return params.color;
        }
      },
      data: ['个人', '年级'],
      bottom: 10,     // 图例移动到图表下方
      left: 'center', // 居中显示
      icon: 'roundRect',
      itemStyle: {
        borderRadius: '50%'
      }
    },
    // tooltip: {
    //     show: true,
    //     trigger: 'item',
    //     // formatter: function (params) {
    //     //     let html = `${params.name}<br/>`;
    //     //     params.value.forEach((val, index) => {
    //     //         html += `${indicator[index].text}: ${val}<br/>`;
    //     //     });
    //     //     return html;
    //     // }
    //     formatter: function (params) {
    //         console.log(params);

    //         // 获取当前数据系列的索引和值
    //         const dataIndex = params.dataIndex;
    //         const discipline = indicator[dataIndex].text;
    //         const personalScore = personalValues[dataIndex];
    //         const gradeScore = gradeValues[dataIndex];
    //         return `${discipline}<br/>个人: ${personalScore}分<br/>年级: ${gradeScore}分`;
    //     }
    // },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: function (params) {
        // 创建一个包含所有学科信息的表格
        // let tooltipContent = '<div style="text-align: center; font-weight: bold; margin-bottom: 5px;">成绩详情</div>';
        let tooltipContent = '<div style="text-align: center; font-weight: bold; margin-bottom: 5px;"></div>';
        tooltipContent += '<table style="width: 100%; border-collapse: collapse;">';
        tooltipContent += '<thead><tr>';
        tooltipContent += '<th style="text-align: left; padding: 2px 5px; border-bottom: 1px solid #ccc;">学科</th>';
        tooltipContent += '<th style="text-align: right; padding: 2px 5px; border-bottom: 1px solid #ccc;">个人</th>';
        tooltipContent += '<th style="text-align: right; padding: 2px 5px; border-bottom: 1px solid #ccc;">年级</th>';
        tooltipContent += '</tr></thead><tbody>';

        // 遍历所有学科，显示个人和年级成绩
        for (let i = 0; i < indicator.length; i++) {
          const discipline = indicator[i].text;
          const personalScore = personalValues[i];
          const gradeScore = gradeValues[i];

          tooltipContent += '<tr>';
          tooltipContent += `<td style="padding: 2px 5px;">${discipline}</td>`;
          tooltipContent += `<td style="padding: 2px 5px; text-align: right;">${personalScore}</td>`;
          tooltipContent += `<td style="padding: 2px 5px; text-align: right;">${gradeScore}</td>`;
          tooltipContent += '</tr>';
        }

        tooltipContent += '</tbody></table>';
        return tooltipContent;
      },
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    radar: [
      {},
      {
        indicator: indicator,
        center: ['50%', '40%'],
        radius: 75,
        axisName: {
          color: '#00DFFD',
          fontSize: 14,
          borderRadius: 3,
          padding: [-10, -10]
        }
      }
    ],
    series: [
      {
        type: 'radar',
        radarIndex: 1,
        data: [
          {
            value: personalValues,
            name: '个人',
            // symbol: 'rect',
            symbolSize: 10,
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: 'rgba(0, 255, 178, 0.3)',
                  offset: 0
                },
                {
                  color: 'rgba(0, 255, 178, 1)',
                  offset: 1
                }
              ])
            },
            // label: {
            //     show: true,
            //     formatter: function (params) {
            //         return params.value;
            //     }
            // }
          },
          {
            value: gradeValues,
            name: '年级',
            label: {
              show: false,
              position: 'top', // 使用outside自动调整位置
              distance: 15, // 增加标签与图形的距离
              formatter: function (params) {
                return params.value;
              },
              color: '#fff', // 设置标签颜色以匹配年级系列
              fontSize: 12,
              borderRadius: 2 // 添加圆角
            },
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: 'rgba(255,243,131, 0.3)',
                  offset: 0
                },
                {
                  color: 'rgba(255,243,131, 1)',
                  offset: 1
                }
              ])
            }
          }
        ]
      }
    ]
  };
  const dadar = echarts.init(radarChart.value)
  dadar.setOption(dadarOption);

}



const youXXK = ref('');

// 学科均衡度
const subject_jhd = async () => {

  var gradeMax = await stuApi.getStudy_grade_max(glb_stuCode.value);

  var last_score = await stuApi.getStudy_last_score(glb_stuCode.value);
  console.log("aaaaaaaaa",last_score);
  console.log("bbbbb",gradeMax);

  // 优秀学科
  youXXK.value = last_score.data
      .filter(item => item.school_ranking <= 50)
      .map(item => item.discipline)
      .join('、');

  subject_jhd_chat(gradeMax,last_score);
}


watch(() => paramsStore.personCode, (newPersonCode, oldPersonCode) => {
  if (newPersonCode !== oldPersonCode) {
    glb_stuCode.value = newPersonCode;
    initData();
  }
}, { immediate: true });


onMounted(() => {
  initData();
  refreshDataInterval();
})

onUnmounted(() => {
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => {
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
      initData();
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}



</script>
<style scoped="studyContainer" lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}

.studyContainer {
  gap: 10px;
  height: 100%;

  .title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    border-left: 4px solid #00A7FF;
    padding-left: 10px;
    border-radius: 2px;
    margin-bottom: 5px;
  }

  .box1 {
    margin: 0px auto;
    box-sizing: border-box;
    width: 99%;
    height: 60%;

    .chengJJL-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      height: calc(100% - 25px);

      .chengJJL-item {
        flex: 30%;
        width: 100%;
        display: flex;
        gap: 2px;

        .chengJJL-itembox-left {
          flex: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;

          .score1 {
            width: 100%;
            font-size: 65px;
            color: #00D1FF;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 10px;
            text-shadow: 5px 3px 6px rgba(0, 148, 255, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.5);
            font-family: YSBiaoTiHei-regular;
            margin-top: 30px;
          }

          .score {

            font-size: 70px;
            font-weight: bold;
            letter-spacing: 8px;
            font-style: italic;
            color: #00D1FF;

            text-shadow:
                3px 3px 0 #008899,
                -2px -2px 0 #00ffff,
                0 0 15px rgba(0, 255, 255, 0.8),
                0 0 30px rgba(0, 255, 255, 0.6);

            padding: 20px 2px;
            border-radius: 10px;

            transition: transform 0.3s ease;
            cursor: pointer;
          }

          .score:hover {
            transform: scale(1.1);
          }

          .score-p {
            color: #E5E5E5;
            font-family: 'HarmonySansSC', sans-serif;
            font-size: 14px;
          }

          .score-img {
            position: absolute;
            top: -10px;
            right: 35px;
            width: 71px;
            height: 64px;
            /* border: 1px solid red; */
          }
        }

        .chengJJL-itembox-right {
          flex: 60%;
        }

        .chengJJL-itembox {
          flex: 1;
        }
      }

    }
  }

  .box2 {
    margin: 0px auto;
    box-sizing: border-box;
    height: calc(40% - 10px);
    width: 99%;

    .xuekjhd-container {
      display: flex;
      gap: 2px;
      height: calc(100% - 25px);

      .xuekjhd-itembox-left {
        flex: 40%;
        height: 100%;
      }

      .xuekjhd-itembox-right {
        flex: 60%;
        display: flex;
        align-items: center;
        justify-items: center;
        padding-left: 20px;
        padding-right: 10px;
        height: 100%;
        color: #fff;
        .studesc{
          font-size: 14px; line-height: 25px;
        }
        .stuname {
          position: relative;
          display: inline-block;
          font-size: 22px;
          font-weight: 800;
          color: #00ffff;
          padding: 5px 15px;
          margin-right: 5px;
          /* 渐变背景 */
          background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 255, 255, 0.05));
          cursor: pointer;
        }
        p {
          line-height: 30px;
        }
        .yxxk {
          position: relative;
          display: inline-block;
          font-size: 18px;
          font-weight: 700;
          padding: 2px 8px;
          margin: 0 2px;
          background: linear-gradient(135deg, rgba(0, 255, 127, 0.2), rgba(0, 255, 127, 0.05));
          cursor: pointer;
        }


      }
    }
  }


  .table-container {
    border: 1px solid #00FFF0;
    border-radius: 3px;
    overflow: hidden;
    width: 410px;
    .table-row {
      display: flex;
      font-size: 14px;
      line-height: 20px;
      img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }

    .table-cell {
      padding: 0.75rem;
      border-right: 1px solid #00FFF0;
      border-bottom: 1px solid #00FFF0;
    }

    /* 列宽设置 */
    .col-30 {
      width: 30%;
      font-size: 14px;
      vertical-align: middle;
    }

    .col-70 {
      width: 70%;
      font-size: 14px;
    }

    /* 去除最后一行的下边框和最后一列的右边框 */
    .table-row:last-child .table-cell {
      border-bottom: none;
    }

    .table-cell:last-child {
      border-right: none;
    }
  }
}
</style>